<script lang="ts" setup>
import { Description, DescItem, useDescription } from '@vben/components'

const mockData: Recordable = {
  username: 'test',
  nickName: 'VB',
  age: '123',
  phone: '15695909xxx',
  email: '190848757@qq.com',
  addr: '厦门市思明区',
  sex: '男',
  certy: '3504256199xxxxxxxxx',
  tag: 'orange',
}
const schema: DescItem[] = [
  {
    field: 'username',
    label: '用户名',
  },
  {
    field: 'nickName',
    label: '昵称',
    render: (curVal, data) => {
      return `${data.username}-${curVal}`
    },
  },
  {
    field: 'phone',
    label: '联系电话',
  },
  {
    field: 'email',
    label: '邮箱',
  },
  {
    field: 'addr',
    label: '地址',
  },
]
const [register] = useDescription({
  title: 'useDescription',
  data: mockData,
  schema: schema,
  labelPlacement: 'left',
})

const [register1] = useDescription({
  title: '无边框',
  bordered: false,
  data: mockData,
  schema: schema,
  labelPlacement: 'left',
})
</script>

<template>
  <VbenCard title="详情组件示例">
    <Description
      title="基础示例"
      :column="3"
      label-placement="left"
      :data="mockData"
      :schema="schema"
    />

    <Description
      class="mt-4"
      title="垂直示例"
      :column="2"
      :data="mockData"
      :schema="schema"
    />

    <Description @register="register" class="mt-4" />
    <Description @register="register1" class="mt-4" />
  </VbenCard>
</template>
